<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Editors and Triggers</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("grid,tree,block-view,common-types");</script>
		<script type="text/javascript">			
			dorado.onInit(function() {
				var phones = $ajax.requestSync("data/phones.js").getJsonData();
				
				var dialog = new dorado.widget.Dialog({
					caption: "弹出窗口", layout: "Anchor", width: 300, height: 150,
					children: [{
						$type: "Button", caption: "向编辑框返回一个值",
						layoutConstraint: { left: "50%", top: "50%" },
						onClick: function(self) {
							var editor = dialog.get("userData"); // 取得对应的编辑框 
							editor.set("text", "Trigger设置的值");
							dialog.hide();
						}
					}]
				});
				
				var dataSetFile = new dorado.widget.DataSet({
					data: { id: "root", name: "demo", isDirectory: true },
					dataType: "File"
				});
				
				var dataSetPersions = new dorado.widget.DataSet({
					dataProvider: new dorado.AjaxDataProvider("get-persons.do")
				});
				
				new dorado.widget.Container({
					renderTo: document.body,
					layout: { $type: "Form", cols: "150,230,*" },
					children: [
						{ $type: "Label", text: "自定义的Trigger1：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "Trigger",
								onExecute: function(self, arg) {
									arg.editor.set("text", "Trigger设置的值");
								}
							}
						},
						{ $type: "Label", text: "Trigger可以看作是跟编辑框显示在一起的一个按钮，可以在其中放置任何逻辑。" },
						
						{ $type: "Label", text: "自定义的Trigger2：" },
						{ $type: "TextEditor", width: 200,
							trigger: [{
									$type: "Trigger",
									iconClass: "d-trigger-icon-search",
									onExecute: function(self, arg) {
										dialog.set("userData", arg.editor);
										dialog.show();
									}
								},
								"triggerClear"
							]
						},
						{ $type: "Label", text: "一个编辑框可以绑定多个Trigger。" },
						
						{ $type: "Label", text: "自定义的Trigger3：" },
						{ $type: "TextEditor", width: 200, dataType: "float", displayFormat: "0.####", typeFormat: "0.####", value: 1,
							trigger: [
								{ $type: "Trigger", icon: "images/m2.gif", userData: "*2", onExecute: onMathTriggerExecute },
								{ $type: "Trigger", icon: "images/m3.gif", userData: "*3", onExecute: onMathTriggerExecute },
								{ $type: "Trigger", icon: "images/d2.gif", userData: "/2", onExecute: onMathTriggerExecute },
								{ $type: "Trigger", icon: "images/d3.gif", userData: "/3", onExecute: onMathTriggerExecute }
							]
						},
						{ $type: "Label", text: "看，我们给Trigger定义了自己的图标。" },
						
						{ $type: "Label", text: "普通的列表下拉框：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "ListDropDown",
								items: phones,
								property: "product"
							}
						},
						{ $type: "Label", text: "下拉框其实是一种特殊的Trigger。" },
						
						{ $type: "Label", text: "包含Grid的下拉框：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "ListDropDown", width: 260,
								items: phones, property: "product",
								columns: [
									{ property: "product", width: "*" },
									{ property: "manufacturer", width: "*" }
								]
							}
						},
						{ $type: "Label", text: "定义Grid型的下拉框对dorado而言异常简单。" },
						
						{ $type: "Label", text: "支持自动筛选的下拉框：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "ListDropDown", width: 240, maxHeight: 300,
								dynaFilter: true, autoOpen: true,
								items: (function(){									
									function getRandomChar() {
										var i = parseInt(Math.random() * 5);
										return String.fromCharCode(i + (parseInt(Math.random() * 2) ? 'A' : 'a').charCodeAt(0));
									}
									
									function getRandomString(len) {
										var s = '';
										for (var i = 0; i < len; i++) s += getRandomChar();
										return s;
									}
									
									var item = [];
									for (var i = 0; i < 1000; i++) {
										item.push(getRandomString(parseInt(Math.random() * 10) + 10));
									}
									return item;
								}())
							}
						},
						{ $type: "Label", text: "这是一种可以随着你的输入动作自动对下拉值进行筛选的下拉框。" },
						
						{ $type: "Label", text: "与DataSet绑定的下拉框：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "DataSetDropDown", width: 230,
								dataSet: dataSetPersions, property: "name", dynaFilter: true,
								onSetFilterParameter: function(self, arg) {
									arg.dataSet.set("parameter", {
										name: arg.filterValue
									});
								}
							}
						},
						{ $type: "Label", text: "这是另一种支持下拉值筛选的下拉框，其筛选逻辑可以由Server端来实现。请尝试在打开下拉框之后输入\"文\"然后点击那个小漏斗。" },
						
						{ $type: "Label", text: "自定义滑动条下拉框：" },
						{ $type: "TextEditor", width: 200, dataType: "int", value: 0,
							trigger: {
								$type: "CustomDropDown", width: 260,
								control: {
									$type: "Container",
									children: [{ $type: "Slider", 
										onValueChange: function(self, arg){
											var dropdown = dorado.widget.DropDown.findDropDown(self);
											var editor = dropdown.get("editor");
											editor.set("value", self.get("value"));
											dropdown.close();
										} 
									}]
								}
							}
						},
						{ $type: "Label", text: "自定义下拉框意味着我们可以在下拉框中放入任何想要的内容。" },
						
						{ $type: "Label", text: "自定义花色下拉框：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "CustomDropDown",
								control: {
									$type: "BlockView",
									width: 442, height: 118, blockWidth: 100, blockHeight: 100,
									style: "border: none",
									renderer: new dorado.widget.blockview.ImageBlockRenderer(),
									items: [
										{ caption: "黑桃", image: "images/pique.png" },
										{ caption: "红桃", image: "images/coeur.png" },
										{ caption: "草花", image: "images/trefle.png" },
										{ caption: "方片", image: "images/carreau.png" }
									],
									onBlockClick: function(self, arg) {
										var dropDown = dorado.widget.DropDown.findDropDown(self);
										dropDown.close(arg.data.caption);
									}
								}
							}
						},
						{ $type: "Label", text: "这只是另一个的自定义下拉框的使用场景，与上面的例子没有太大的不同。" },
						
						{ $type: "Label", text: "自定义树状列表下拉框：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "CustomDropDown",
								control: {
									$type: "DataTree",
									width: 240, height: 260, style: "border: none",
									dataSet: dataSetFile,
									bindingConfigs: [
										{ name: "File", childrenProperty: "children",
											labelProperty: "name", recursive: true
										}
									],
									onDataNodeCreate: function(self, arg) {
										function getIcon(entity) {
											return entity.get("isDirectory") ? "images/folder.gif" : "images/file.gif";
										}
										var node = arg.node;
										node.set({
											expanded: (node.get("label") == "demo"),
											icon: getIcon(node.get("data")),
											hasChild: node.get("data.isDirectory")
										});
									},
									onDataRowClick: function(self) {
										var dropDown = dorado.widget.DropDown.findDropDown(self);
										dropDown.close(self.get("currentNode.data.name"));
									}
								}
							}
						},
						{ $type: "Label", text: "一种常见的自定义下拉框的使用场景。" },
						
						{ $type: "Label", text: "年月下拉框：" },
						{ $type: "TextEditor", width: 200,
							trigger: {
								$type: "YearMonthDropDown",
								onValueSelected: function(self, arg) {
									var value = arg.selectedValue;
									arg.selectedValue = value[0] + "年" + (value[1] + 1) + "月";
								}
							}
						},
						{ $type: "Label", text: "年月下拉框被抽象成了一种控件，十分方便使用。" },
						
						{ $type: "Label", text: "IP地址编辑框：" },
						{ $type: "CustomSpinner", width: 200, 
							pattern: "IP: [0,255].[0,255].[0,255].[0,255]", value: [192, 168, 0, 101] 
						},
						{ $type: "Label", text: "这是Spinner控件的示例，Spinner从内部实现的角度来看不过是编辑框和Trigger结合后的一种产物。" },
						
						{ $type: "Label", text: "较复杂的时间编辑框：" },
						{ $type: "DateTimeSpinner", width: 200, type: "dateTime",
							value: new Date(), trigger: "defaultDateDropDown"
						},
						{ $type: "Label", text: "Spinner上还可以绑定更多的Trigger或下拉框。" }
					]
				});
			});
			
			function onMathTriggerExecute(self, arg) {
				var n = arg.editor.get("value");
				n = eval(n + self.get("userData"));
				arg.editor.set("value", n);
			}
		</script>
	</head>
	<body style="height: 100%"></body>
</html>
